<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">考勤打卡</block>
		</cu-custom>

		<view class="pic padding">
			<view class="padd">
				<view class=" lg   round margin-left ava">
					<image class="cu-avatar lg round" :src="user_info.avatar"></image>
				</view>
			</view>
			<view class="padd_two">
				<view class="padd_one">
					<view class="text_a">{{student_info.real_name||user_info.nickname}}</view>
					<view class="bbutt">
						<block>
						<button class="butt" v-if="stuinfo.sign_status==1">可签到</button>
						<button class="butt" v-if="stuinfo.sign_status==2">已签到</button>
						<button class="butt" v-if="stuinfo.sign_status==3">上班中</button>
						<button class="butt" v-if="stuinfo.sign_status==4">已下班</button>
						<button class="butt" style="background-color: red;" v-if="stuinfo.sign_status==5">已迟到</button>
						</block>
					</view>
				</view>
				<view class="time padd_three text_c">
					<view class="iconfont  icon-calender padd_five "></view>
					<view class="text_b">{{stuinfo.now_date}}</view>
					<view class="padd_four">
						<view class="iconfont  icon-savetime padd_five"></view>
						{{stuinfo.now_time}}
					</view>
				</view>
			</view>
		</view>
		<view class="page">
			<view class="butt_a">
				<button class="dot" @tap="getsign">
					<block>
						<view class="statusword" v-if="stuinfo.sign_status==1">可签到</view>
						<view class="statusword" v-if="stuinfo.sign_status==2">已签到</view>
						<view class="statusword" v-if="stuinfo.sign_status==3">上班中</view>
						<view class="statusword" v-if="stuinfo.sign_status==4">已下班</view>
						<view class="statusword" v-if="stuinfo.sign_status==5">已迟到</view>
					</block>
					<view style="font-size: 30rpx;">{{stuinfo.now_time}}</view>
				</button>
			</view>
			<view class="text_e" v-if="stuinfo.sign_status==5||stuinfo.sign_status==1||stuinfo.sign_status==4">
				<view style="display:inline-flex;text-align: center; margin-top: 40rpx;">
					<view class="xl text-green cuIcon-roundcheckfill" style="margin-top: 5rpx;"></view>
					<view style="margin-left: 20rpx;">您已在打卡范围内，可以打卡 </view>
					<view style="margin-left: 20rpx;" @click="againget()">刷新</view>
				</view>
			</view>
		</view>
		<view style="background-color: #FFFFFF; padding-bottom: 30rpx;">
			<view class="cu-timeline"> 
				<view class="cu-item "  v-for="(item,index) in list" :key="index">
					<view class="padd_six">
						<block>
							<view class="text_f" v-if="item.work_type==1">上午</view>
							<view class="text_f" v-if="item.work_type==2">下午</view>
						</block>
						<view class="tiemword">{{timeToStr(item.add_time,"MM-dd hh:mm")}}</view>
						<view class="text_j">{{item.address}}</view>
					</view>
				</view>
				<!-- <view class="cu-timeline">
					<view class="cu-item text-blue ">
						<view class=" padd_six">
							<view class="text_i">下班时间17:00</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	const {appLogin,httpGet,httpPost,msg,timeToStr} = require("@/utils/common.js")
	export default {
		data() {
			return {
				user_info:{},
				lat:'',
				student_info:{},
				work_type:'',
				now_date:'',
				now_time:'',
				sign_status:[''],
				stuinfo:'',
				list:[],
				timeToStr:timeToStr,
			}
		},
		onLoad() {
			appLogin((user_info) => {
				console.log(user_info)
				this.user_info = user_info
				this.getstudentinfo()
				// this.getsign()
				this.getlocation()
				this.getsignlist()
			})
		},
		methods: {
			getstudentinfo(){
				httpGet({
					url:'/api/student/info'
				}).then((res)=>{
					this.student_info = res.result
					console.log(res)
				})
			},
			getlocation(){
				uni.getLocation({
				    type: 'wgs84',
				    success: (res)=>{
				        // console.log('当前位置的经度：' + res.longitude);
				        // console.log('当前位置的纬度：' + res.latitude);
						this.lat = res.latitude
						this.lng = res.longitude
						this.getsignstatus()
						// this.getsign()
				    },
				});
			},
			getsignstatus(){
				httpPost({
					url:'/api/student/signin_status',
					data:{
						lat:this.lat,
						lng:this.lng,
					}
				}).then((res)=>{
					console.log(res)
					// this.student_info = res.result.student_info
					// this.work_type = res.result.work_type
					// this.sign_status = res.result.sign_status
					// res.result.sign_status =  5
					this.stuinfo = res.result
					this.sign_status = res.result.sign_status['']
					console.log(this.stuinfo)
					// msg(res.msg ,'none')
					// msg('请输入姓名', 'none');
				})
			},
			getsign(){
				httpPost({
					url:'/api/student/signin',
					data:{
						lat:this.lat,
						lng:this.lng,
					}
				}).then((res)=>{
					console.log(res)
					// msg(res.msg)
					msg(res.msg ,'none')
					this.getsignlist()
				})
			},
			getsignlist(){
				httpGet({
					url:'/api/student/signin_list',
					date:{
						student_id:this.student_id,
						page:this.page,
						page_size:this.page_size
					}
				}).then((res)=>{
					this.list = res.result.list.splice(0, 3);
					console.log(this.list)
					msg(res.msg ,'none')
				})
			},
			againget(){
				this.getstudentinfo()
				// this.getsign()
				this.getlocation()
				this.getsignlist()
				msg(res.msg ,'none')
			}
		}
	}
</script>

<style>
	.cu-item {
		display: block;
	}

	.pic {
		display: flex;
		background-color: #FFFFFF;
	}

	.time {
		display: flex;
	}

	.page {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		height: 470rpx;
		border-bottom: 1rpx solid rgba(179, 179, 179, 0.1);

	}

	.page_a {
		padding-top: 90rpx;
		background-color: #FFFFFF;
	}

	.ava {
		padding: 8rpx 8rpx 8rpx 8rpx;
		border: #0081FF solid 1rpx;

	}

	.dot {
		line-height: 50rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		padding-top: 60rpx;
		width: 230rpx;
		height: 230rpx;
		border-radius: 120rpx;
		text-align: center;
		background-color: rgb(59, 115, 246);
	}

	.butt {
		display: inline;
		padding: 8rpx 18rpx 8rpx 18rpx;
		font-size: 30rpx;
		height: 40rpx;
		width: 116rpx;
		color: rgb(113, 150, 248);
		background-color: rgb(216, 227, 253);
	}

	.butt_a {
		padding-top: 85rpx;
	}

	.bbutt {
		position: relative;
		margin-left: 31rpx;
	}

	.padd {
		margin-top: 30rpx;
	}

	.padd_one {
		display: flex;
		margin-top: 20rpx;
	}

	.padd_two {
		margin-left: 50rpx;
	}

	.padd_three {
		display: flex;
		margin-top: 10rpx;
	}

	.padd_four {
		display: flex;
		margin-left: 160rpx;
	}

	.padd_five {
		margin-right: 20rpx;
	}

	.padd_six {
		margin-left: 0rpx;
	}

	.text_a {
		margin-top: 12rpx;
		font-size: 34rpx;
	}

	.text_b {
		width: 150rpx;
	}

	.text_c {
		background-color: #FFFFFF;
		color: rgb(136, 136, 136);
	}

	.text_e {
		text-align: center;
	}

	.text_f {
        color: #000000;
		margin-bottom: 10rpx;
	}

	.text_i {
		margin-bottom: 210rpx;
		color: #909399;
	}

	.text_j {
		background-color: #FFFFFF;
		color: #909399;
	}

	.cu-timeline {
		display: block;
		
	}
	.cu-timeline>.cu-item {
		padding: 80upx 30upx 30upx 180upx;
		position: relative;
		display: block;
		z-index: 0;
	}

	.cu-timeline>.cu-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1upx;
		left: 140upx;
		height: 100%;
		top: 0;
		z-index: 8;
	}
	.cu-timeline>.cu-item::before {
		font-family: "cuIcon";
		display: block;
		position: absolute;
		top: 76upx;
		z-index: 9;	
		width: 50upx;
		height: 30upx;
		text-align: center;
		border: none;
		line-height:50upx;
		left: 116upx;
	}
	.statusword{
		font-size: 36rpx;
	}
</style>
